/*
 * @Author: zhengchao
 * @Date: 2021-05-06 13:41:11
 * @LastEditors: zhengchao
 * @LastEditTime: 2021-10-14 14:25:25
 * @Description: 
 * @FilePath: \nocode-react-ts\src\components\left.tsx
 */
// import { useMemo } from 'react'
import Box from './boxs/box'
import { Tabs } from 'antd';
import boxConfig from '../config/leftBox'
import './styles/left.scss'
import {
  HighlightOutlined,
  PlayCircleOutlined,
} from '@ant-design/icons';

const { TabPane } = Tabs;

const Left = () => {
  const CpIcon: any = {
    base: <HighlightOutlined />,
    media: <PlayCircleOutlined />
  };

  const TabIcons = (type: string) => {
    return (
      <div>
        {CpIcon[type]}
      </div>
    );
  }

  return <div className="left">
    <Tabs defaultActiveKey="1" tabPosition="left" className="tab" style={{ height: 220 }}>
      <TabPane tab={TabIcons('base')} key="1">
        <div className="box-title">基础组件</div>
        <div className="box-contanier">
          {boxConfig.map(item => {
            return <Box items={item} key={item.title}></Box>
          })}
        </div>
      </TabPane>
      <TabPane tab={TabIcons('media')} key="2">
        <div className="box-title">图表组件</div>
        <div className="box-contanier">
          {boxConfig.map(item => {
            return <Box items={item} key={item.title}></Box>
          })}
        </div>
      </TabPane>
    </Tabs>
  </div>
}

export default Left